<template>
  <div class="hot-box">
    <div class="hot-left" ref="hotscroll">
      <p class="hot-item">热点视频</p>
      <div class="hot-container">
        <ul id="hotUlId">
          <li v-for="item in hotWorksList" :key="item.worksId">
            <div class="cover-box">
              <img :src="item.coverPath" />
              <div class="cover-main">
                <img :src="item.coverPath" />
              </div>
            </div>
            <div class="hot-number">
              <span class="iconfont icon-aixin">{{
                item.likeCounts | filterDotNumber
              }}</span>
              <span class="hot-time">{{ item.worksSeconds | formatSec }}</span>
            </div>
            <p class="item-title">
              {{ item.worksDesc
              }}<template v-for="topic in item.topicList">
                #{{ topic.topicTitle }}</template
              >
            </p>
            <p class="item-source">
              @{{ item.authorName }}<i>-</i>{{ item.updateTime | formatDate }}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div ref="hotRight" class="hot-right">
      <p class="hot-search">音秀热榜</p>
      <div class="ranking">
        <ul>
          <li v-for="(item, index) in topicHotList" :key="item.topicId">
            <!-- <img src="../../assets/images/top1.png" /> -->
            <div class="grade" v-if="index < 3"></div>
            <div class="other-grade" v-else>{{ index + 1 }}</div>
            <router-link to="">
              <div class="hot-topics">
                <p class="ranking-title">
                  {{ item.topicTitle }}
                </p>
                <span class="ranking-number"
                  >{{ item.topicView | filterNumber }} 热度</span
                >
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import {
  getTopicHotListApi,
  getHotWorksListApi,
  getSimpleRandomWorksListApi,
} from "@/api/hot";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      topicHotList: [],
      hotWorksList: [],
      currentScrollHeight: 0,
      axis: 0,
    };
  },
  filters: {
    // formatDate(time) {
    //   if (time == null || time === "") {
    //     return "N/A";
    //   }
    //   let date = new Date(time);
    //   return formatDate(date, "MM月dd日");
    //   //  "yyyy-MM-dd hh:mm:ss"
    // },
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      // let date = new Date(time);
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy年MM月dd日");
      }

      console.log(result);
      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    formatSec(time) {
      const min =
        parseInt((time % 3600) / 60) < 10
          ? "0" + parseInt((time % 3600) / 60)
          : parseInt((time % 3600) / 60);
      const sec =
        parseInt((time % 3600) % 60) < 10
          ? "0" + parseInt((time % 3600) % 60)
          : parseInt((time % 3600) % 60);
      return min + ":" + sec;
    },
    filterDotNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(1);
        return realVal + "w";
      } else {
        return arg;
      }
    },
    filterNumber(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(0);
        return realVal + "w";
      } else {
        return arg;
      }
    },
  },
  created() {
    this.getTopicHotListFun();
    this.getHotWorksListFun();
  },
  mounted() {
    var rightmain = document.querySelector("#rightmain");
    rightmain.style.position = "static";
    var hotRight = document.querySelector(".hot-right");
    hotRight.style.height = document.documentElement.clientHeight - 100 + "px";
    var that = this;
    window.addEventListener(
      "scroll",
      that.throttle(() => {
        let s = document.documentElement.scrollTop || document.body.scrollTop;
        this.currentScrollHeight = s;
        if (that.fScrollTop()) {
          that.getHotWorksListFun();
        }
      },1000, 1000),
      true
    );
  },
  methods: {
    getHotWorksListFun() {
      getHotWorksListApi({ userId: this.userInfo.userId }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data == null || res.data.data.length == 0) {
            // 提示用户将为您提供推荐数据
            this.$message({
              type: "info",
              message: "将为您提供推荐作品",
            });
            this.getSimplyRandomWorksList();
          } else {
            this.hotWorksList = this.hotWorksList.concat(res.data.data);
          }
        }
      });
    },
    getSimplyRandomWorksList() {
      getSimpleRandomWorksListApi().then((res) => {
        if (res.data.code == 200) {
          this.hotWorksList = this.hotWorksList.concat(res.data.data);
        }
      });
    },
    getTopicHotListFun() {
      getTopicHotListApi().then((res) => {
        if (res.data.code == 200) {
          this.topicHotList = res.data.data;
        }
      });
    },
    fScrollTop() {
      var item = document.getElementById("hotUlId");
      if (item != null) {
        var liItem = item.getElementsByTagName("li");
      var lastItem = liItem[liItem.length - 1];
      // 当前瓶宽
      var clientHeight = document.documentElement.clientHeight;
      // ul 的高度
      var clientWidth = item.offsetWidth;
      // 当前距离顶部的距离
      var scrollTop = item.scrollTop;
      // 第一个li的宽度
      if (liItem.length <= 0) {
        return false
      }
      var liItemWidth = liItem[0].offsetWidth;
      var len = this.hotWorksList.length;
      var row = len / 3;
      var heightSize = row * 315;
      if (this.currentScrollHeight < heightSize - clientHeight) {
        return false;
      } else {
        return true;
      }
      }
    },
    throttle(func, wait, mustRun) {
      var timeout,
        startTime = new Date();

      return function () {
        var context = this,
          args = arguments,
          curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args);
          startTime = curTime;
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait);
        }
      };
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.hot-box {
  display: flex;
  width: 100%;
  /* height: 1280px; */
  background: #161823;
  box-sizing: border-box;
  padding-bottom: 20px;
}
.hot-left {
  width: 77%;
  height: 100%;
  padding: 10px 25px;
  overflow-y: scroll;
  box-sizing: border-box;
  /* border: 1px solid rgb(255, 255, 255); */
}
.hot-left::-webkit-scrollbar {
  display: none;
}
.hot-item {
  font-size: 20px;
  margin-bottom: 15px;
  box-sizing: border-box;
  color: #fff;
}
.hot-search {
  font-size: 17px;
  margin-bottom: 15px;
  box-sizing: border-box;
  color: #fff;
}
.hot-right {
  width: 320px;
  /* height: 1250px; */
  /* height: 685px; */
  position: fixed;
  right: 35px;
  padding: 14px;
  margin-top: 15px;
  border-radius: 8px;
  box-sizing: border-box;
  background: #252632;
  overflow-y: scroll;
}
.hot-container {
  overflow: auto;
  width: 100%;
  height: 100%;
}
.hot-container ul {
  display: flex;
  flex-wrap: wrap;
}
.hot-container ul li {
  cursor: pointer;
  list-style: none;
  width: 31%;
  border-radius: 5px;
  height: 305px;
  float: left;
  margin: 5px 11px;
  color: #fff;
  background: #252632;
  position: relative;
}
.hot-container ul li:hover {
  background: #33343f;
}

.hot-container ul li > div {
  height: 220px;
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
}
.cover-box > img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  /* height: 220px; */
  filter: blur(8px);
}
.cover-main > img {
  position: absolute;
  width: 100%;
  height: 220px;
  z-index: 99;
  top: 0;
  object-fit: contain;
  border-radius: 5px 5px 0 0;
}
.item-title {
  height: 35px;
  font-size: 14px;
  padding: 8px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  display: -webkit-box;
}
.item-source {
  font-size: 12px;
  color: rgb(153 153 153);
  margin: 6px 0 10px 10px;
}
.item-source i {
  margin: 0 8px;
}
.ranking ul li {
  height: 60px;
  display: flex;
  line-height: 1.6;
}
.ranking-title {
  font-size: 15px;
  color: #fff;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  word-break: break-all;
}
.ranking-number {
  font-size: 13px;
  color: rgb(153 153 153);
}
.ranking ul li img {
  width: 30px;
  height: 30px;
}
.hot-number {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  bottom: 85px;
  height: 45px;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  z-index: 100;
}
.hot-number span {
  align-items: center;
  bottom: 4px;
  color: #fff;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 8px;
  line-height: 22px;
  position: absolute;
}
.hot-number .icon-aixin:before {
  margin-right: 2px;
}
/* .recreation-number span:before{
  content:'\e8ab;';
  color: #fff;
} */
.hot-time {
  right: 8px;
  margin-left: auto;
  background: #4f4f4f;
  height: 22px;
  border-radius: 7px;
  /* float: right; */
  width: 45px;
}
.other-grade {
  width: 32px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #51515b;
}
.ranking ul li:first-of-type .grade {
  background-image: url(../../assets/images/top1.png);
  background-size: 100% 100%;
  width: 32px;
  height: 30px;
}
/* .ranking ul li:first-of-type .grade {
  background-image: url(../../assets/images/top1.png);
  background-size: 100% 100%;
  width: 32px;
  height: 30px;
} */
.ranking ul li:nth-child(2) .grade {
  background-image: url(../../assets/images/top2.png);
  background-size: 100% 100%;
  width: 32px;
  height: 30px;
}
.ranking ul li:nth-child(3) .grade {
  background-image: url(../../assets/images/top3.png);
  background-size: 100% 100%;
  width: 32px;
  height: 30px;
}
.ranking ul li:nth-of-type(n + 4) .grade {
  fill: var(--color-text-t3);
  width: 32px;
  height: 30px;
  color: #fff;
}
.hot-topics {
  width: 250px;
  margin-left: 8px;
}
.hot-topics:hover p {
  color: red;
}
</style>
